import { Form, Select } from "antd";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
  asyncCategory1List,
  changeCategory1Id,
  asyncCategory2List,
  asyncCategory3List,
  changeCategory2Id,
  changeCategory3Id
} from "@/app/category";
import { store } from "@/app/store";
import type { CategoryList } from "@/api/category";
export default function Category() {
  const dispatch = useDispatch();

  // 分类列表的数据
  const [category1list, setCategory1list] = useState<CategoryList>([]);
  const [category2list, setCategory2list] = useState<CategoryList>([]);
  const [category3list, setCategory3list] = useState<CategoryList>([]);
  //  获取三个id的数据
  let { category1Id, category2Id, category3Id } = useSelector(
    (state: any) => state.category
  );

  // 根据1Id获取二级分类
  const getCategory1Id = async (value: any, option: any) => {
        // 解决分类都会出现的bug点击一级2 3 级为空
        
        // setCategory2list([])
        // // console.log(category2list)

        // setCategory3list([])
    // 设置category1Id
    dispatch(changeCategory1Id(option.value));
    // 获取二级分类的数据
    await dispatch<any>(asyncCategory2List(option.value));
    let category2 = store.getState().category || {};
    // console.log(catgory1list, "一级分类数据");
    setCategory2list(category2.cateGory2List);
  };

  // 根据2Id获取三级分类数据
  const getCategory2Id = async(value: any, option: any) => {
        // 解决分类都会出现的bug点击二级3级为空
        // setCategory3list([])
    // 设置category2id
    dispatch( changeCategory2Id(option.value));

    // 获取三级分类数据
   await dispatch<any>(asyncCategory3List(option.value));
    let category3 = store.getState().category || {};
    // console.log(category3 , "san级分类数据");
    setCategory3list(category3.cateGory3List);
  };

  // 根据三级分类的数据
  const getCategory3Id = (value: any, option: any)=>{
    // 设置三级分类的id
    dispatch(changeCategory3Id(option.value))
  }

  // 根据

  useEffect(() => {
    // 定义函数获取一级分类数据
    async function main() {
      await dispatch<any>(asyncCategory1List());
      // 获取一级分类函数
      let category1 = store.getState().category || {};
      // console.log(catgory1list, "一级分类数据");
      setCategory1list(category1.cateGory1List);
    }
    main();
  }, []);

  return (
    <div>
      <Form
        name="validate_other"
        //   onFinish={onFinish}
        layout="inline"
        // initialValues={{
        //   "input-number": 3,
        //   "checkbox-group": ["A", "B"],
        //   rate: 3.5,
        // }}
      >
        <Form.Item label="一级分类">
          <Select
            placeholder="请选择"
            onChange={getCategory1Id}
            style={{ width: 300 }}
          >
            {category1list.map((item) => {
              // 收集动态的id数据
              return (
                <Select.Option   defaultValue={item.id}  key={item.id} value={item.id}>
                  {item.name}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item label="二级分类">
          <Select
            placeholder="请选择"
            style={{ width: 300 }}
            onChange={getCategory2Id}
          >
            {category2list.map((item) => {
              return (
                <Select.Option defaultValue={item.id}  key={item.id} value={item.id}>
                  {item.name}
                </Select.Option>
              );
            })}                                                                                                                                                                       
          </Select>
        </Form.Item>
        <Form.Item label="三级分类">
          <Select placeholder="请选择" style={{ width: 300 }} onChange={getCategory3Id}>
            {
              category3list.map(item =>{
                return  <Select.Option defaultValue={item.id}  key={item.id} value={item.id}>
                {item.name}
              </Select.Option>
              })
            }
          </Select>
        </Form.Item>
      </Form>
    </div>
  );
}
